<template>
	<div id="jp_container_N">
		<div class="jp-type-playlist">
			<div id="jplayer_N" class="jp-jplayer hide"></div>
			<div class="jp-gui">
				<div class="jp-video-play hide">
					<a class="jp-video-play-icon">play</a>
				</div>
				<div class="jp-interface">
					<div class="jp-controls">
						<div><a class="jp-previous"><i class="icon-control-rewind i-lg"></i></a></div>
						<div>
							<a class="jp-play"><i class="icon-control-play i-2x"></i></a>
							<a class="jp-pause hid"><i class="icon-control-pause i-2x"></i></a>
						</div>
						<div><a class="jp-next"><i class="icon-control-forward i-lg"></i></a></div>
						<div class="hide"><a class="jp-stop"><i class="fa fa-stop"></i></a></div>
						<div><a class="" data-toggle="dropdown" data-target="#playlist"><i class="icon-list"></i></a></div>
						<div class="jp-progress hidden-xs">
							<div class="jp-seek-bar dk">
								<div class="jp-play-bar bg-info">
								</div>
								<div class="jp-title text-lt">
									<ul>
										<li></li>
									</ul>
								</div>
							</div>
						</div>
						<div class="hidden-xs hidden-sm jp-current-time text-xs text-muted"></div>
						<div class="hidden-xs hidden-sm jp-duration text-xs text-muted"></div>
						<div class="hidden-xs hidden-sm">
							<a class="jp-mute" title="mute"><i class="icon-volume-2"></i></a>
							<a class="jp-unmute hid" title="unmute"><i class="icon-volume-off"></i></a>
						</div>
						<div class="hidden-xs hidden-sm jp-volume">
							<div class="jp-volume-bar dk">
								<div class="jp-volume-bar-value lter"></div>
							</div>
						</div>
						<div>
							<a class="jp-shuffle" title="shuffle"><i class="icon-shuffle text-muted"></i></a>
							<a class="jp-shuffle-off hid" title="shuffle off"><i class="icon-shuffle text-lt"></i></a>
						</div>
						<div>
							<a class="jp-repeat" title="repeat"><i class="icon-loop text-muted"></i></a>
							<a class="jp-repeat-off hid" title="repeat off"><i class="icon-loop text-lt"></i></a>
						</div>
						<div class="hide">
							<a class="jp-full-screen" title="full screen"><i class="fa fa-expand"></i></a>
							<a class="jp-restore-screen" title="restore screen"><i class="fa fa-compress text-lt"></i></a>
						</div>
					</div>
				</div>
			</div>
			<div class="jp-playlist dropup" id="playlist">
				<ul class="dropdown-menu aside-xl dker">
					<!-- The method Playlist.displayPlaylist() uses this unordered list -->
					<li class="list-group-item"></li>
				</ul>
			</div>
			<div class="jp-no-solution hide">
				<span>Update Required</span>
				To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/"
				 target="_blank">Flash plugin</a>.
			</div>
		</div>
	</div>
</template>

<script>
	import 'jplayer/dist/jplayer/jquery.jplayer.min.js'
	import 'jplayer/dist/add-on/jplayer.playlist.min.js'

	var listPlayer;

	export default {
		name: "musicPlayer",
		props: {
			myPalyList: {
				type: Array,
				default: function() {
					return [];
				}
			}
		},
		mounted() {
			listPlayer = new jPlayerPlaylist({
				jPlayer: "#jplayer_N",
				cssSelectorAncestor: "#jp_container_N"
			}, this.palyList, {
				playlistOptions: {
					enableRemoveControls: true,
					autoPlay: false
				},
				swfPath: "js/jPlayer",
				supplied: "webmv, ogv, m4v, oga, mp3, m4a",
				smoothPlayBar: true,
				keyEnabled: true,
				audioFullScreen: false
			});
			// 			listPlayer.setPlaylist([{
			// 					title: "大悲咒",
			// 					artist: "新韵传音",
			// 					mp3: "http://zhangmenshiting.qianqian.com/data2/music/00952af68e24fdaefedff29373db9a5f/596553939/596553939.mp3?xcode=98b8ddafb3670d7d794b86d808232fc4",
			// 					poster: "images/m0.jpg"
			// 				},
			// 				{
			// 					title: "劝世佛歌",
			// 					artist: "新韵传音",
			// 					mp3: "http://zhangmenshiting.qianqian.com/data2/music/66610e45f4ca202d30fcc2e7ba5ba79b/596552737/596552737.mp3?xcode=8a46ccc6ba22ebff2a1779a2a81a9c08",
			// 					poster: "images/m0.jpg"
			// 				}
			// 			]);

			$(document).on($.jPlayer.event.pause, listPlayer.cssSelector.jPlayer, function() {
				$('.musicbar').removeClass('animate');
				$('.jp-play-me').removeClass('active');
				$('.jp-play-me').parent('li').removeClass('active');
			});

			$(document).on($.jPlayer.event.play, listPlayer.cssSelector.jPlayer, function() {
				$('.musicbar').addClass('animate');
			});

			$(document).on('mousedown', '.jp-playlist-item-remove', e => {
				var index = $(e.target).parent().parent().index();
				console.debug("index", index);
				this.$emit('remove', index);
			});

			$(document).on('click', '.jp-play-me', function(e) {
				e && e.preventDefault();
				var $this = $(e.target);
				if (!$this.is('a')) $this = $this.closest('a');

				$('.jp-play-me').not($this).removeClass('active');
				$('.jp-play-me').parent('li').not($this.parent('li')).removeClass('active');

				$this.toggleClass('active');
				$this.parent('li').toggleClass('active');
				if (!$this.hasClass('active')) {
					listPlayer.pause();
				} else {
					var i = Math.floor(Math.random() * (1 + 7 - 1));
					listPlayer.play(i);
				}

			});
		},
		methods: {
			add(music) {
				listPlayer.add(music);
			},
			setPlaylist(playList) {
				listPlayer.setPlaylist(playList);
			},
			setMedia(media, time) {
				$("#jplayer_N").jPlayer("setMedia", media).jPlayer("play", time);
			},
			play(index) {
				listPlayer.play(index);
			},
			playTo(time) {
				$("#jplayer_N").jPlayer("play", time);
			}
		},
		computed: {
			palyList() {
				// console.debug("newData,oldData: {},{}", newData, oldData);
				// this.palyList = newData;
				console.debug("myPalyList: {}", this.myPalyList);
				// this.setPlaylist(this.myPalyList);
				if (this.myPalyList.length > 0) {
					this.setPlaylist(this.myPalyList);
				}
				return this.myPalyList;
			}
		},
		watch: {
			palyList(newData, oldData) { //监听播放列表的变化
				console.debug("newData,oldData: {},{}", newData, oldData);
				this.palyList = newData;
				this.setPlaylist(newData);
				// return this.palyList;
				// $("#jplayer_N").jPlayer("setMedia", newData[0]).jPlayer("play", 80); // 从20秒开始播放
			},
		}
	}
</script>

<style>
	@import url("../assets/css/jplayer.flat.css");
	/* @import url("~jplayer/jplayer.flat.css"); */
</style>
